<template>
  <div class="login-controller">
    <!-- 标题头 -->
    <div class="login-head"><img src="../../assets/imgs/title2x.png" /></div>
    <!-- /标题头 -->
    <!-- 登陆表单 -->
    <div class="login-title">
      <img src="../../assets/imgs/phone.png" />
      <span>手机号码</span>
    </div>
    <!-- 登录类型(用户名密码登录) -->
    <div v-if="type === 0">
      <div class="login-input">
        <van-cell-group border>
          <van-cell>
            <template #title>
              <div class="addon-input">
                <div class="addon-text"  @click="pull" >
                  <span>{{ phonetittle }}</span>
                  <div class="down-icon"><img src="../../assets/imgs/down2x.png"/></div>
                </div>
                <van-field v-model="user.userAccount" :border="false" placeholder="请输入手机号码" clearable />
              </div>
            </template>
          </van-cell>
          <van-field v-model="user.userPassword" type="password" placeholder="这里输入密码" clearable />
        </van-cell-group>
      </div>
      <!-- /登录表单 -->
      <!-- 登录按钮 -->
      <div class="login-auth" @click="changeauth1"><span>验证码登录</span></div>
      <div class="login-button"><van-button type="info" block round>登陆</van-button></div>
      <div class="login-agreement">
        <van-checkbox v-model="agreement" icon-size="13.2px">
          登陆注册即表示同意
          <span>用户协议和隐私政策</span>
        </van-checkbox>
      </div>
    </div>
    <!-- /登录类型(用户名密码登录) -->
    <!-- 登录类型(手机验证码登录1) -->
    <div v-if="type === 1">
      <div class="login-input">
        <van-cell-group border>
          <van-cell>
            <template #title>
              <div class="addon-input">
                <div class="addon-text"  @click="pull" >
                  <span>{{ phonetittle }}</span>
                  <div class="down-icon"><img src="../../assets/imgs/down2x.png"/></div>
                </div>
                <van-field v-model="user.userAccount" :border="false" placeholder="请输入手机号码" clearable />
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!-- /登录表单 -->
      <!-- 登录按钮 -->
      <div class="login-auth" @click="changpass"><span>密码登录</span></div>
      <div class="login-button"><van-button type="info" block round @click="changeauth2">获取验证码</van-button></div>
      <div class="login-agreement">
        <van-checkbox v-model="agreement" icon-size="13.2px">
          登陆注册即表示同意
          <span>用户协议和隐私政策</span>
        </van-checkbox>
      </div>
    </div>
    <!-- /登录类型(手机验证码登录1) -->
    <!-- 登录类型(手机验证码登录2) -->
    <div v-if="type === 2">
      <div class="login-input">
        <van-cell-group border>
          <van-cell>
            <template #title>
              <div class="addon-input">
                <div class="addon-text"  @click="pull" >
                  <span>{{ phonetittle }}</span>
                  <div class="down-icon"><img src="../../assets/imgs/down2x.png"/></div>
                </div>
                <van-field v-model="user.userAccount" :border="false" placeholder="请输入手机号码" clearable />
              </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <div class="auth-input">
                <div class="auth-pass"><input v-model="code[0]" autofocus="autofocus" maxlength="1" @change="focusNext('mobile1')" /></div>
                <div class="auth-pass"><input v-model="code[1]" maxlength="1" ref="mobile1" @change="focusNext('mobile2')" /></div>
                <div class="auth-pass"><input v-model="code[2]" maxlength="1" ref="mobile2" @change="focusNext('mobile3')" /></div>
                <div class="auth-pass"><input v-model="code[3]" maxlength="1" ref="mobile3" /></div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <!-- /登录表单 -->
      <!-- 登录按钮 -->
      <div class="login-auth">
        <div class="leif-tip"><span>已发生到 {{ user.userAccount }}</span></div>
        <span class="tip">请输入验证码</span>
      </div>
      <div class="login-button"><van-button type="info" block round @click="changeauth3">获取验证码</van-button></div>
      <div class="login-agreement">
        <van-checkbox v-model="agreement" icon-size="13.2px">
          登陆注册即表示同意
          <span>用户协议和隐私政策</span>
        </van-checkbox>
      </div>
    </div>
    <!-- /登录类型(手机验证码登录2) -->
    <!-- /登录按钮 -->
    <!-- 第三方登陆 -->
    <div class="quick-login">
      <div class="quick-line"></div>
      <span>第三方登陆</span>
      <div class="quick-line"></div>
    </div>
    <div class="quick-logo">
      <div class="logo"><img src="../../assets/imgs/weibo2x.png" /></div>
      <div class="logo"><img src="../../assets/imgs/qq2x.png" /></div>
      <div class="logo"><img src="../../assets/imgs/weibo2x.png" /></div>
    </div>
    <!-- /第三方登陆 -->
    <!-- 国际区号列表 -->
      <van-popup v-model="show"  position="bottom" round :close-on-click-outside="true" >
        <van-index-bar>
          <template v-for="(item,index) in listitem">
            <van-index-anchor :key="index + item.title"  :index="item.title" />
            <template v-for="(items,indexs) in item.list">
            <van-cell :key="indexs + items.code" @click="phone(items)">
              <span> {{items.en}} </span>
              <span> {{items.cn}} </span>
              <span> {{items.code}} </span>
            </van-cell>
            </template>
          </template>
        </van-index-bar>
      </van-popup>
    <!-- /国际区号列表 -->
  </div>
</template>

<script>
import indexList from './country.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      user: {
        userAccount: '', // 用户账号
        userPassword: '', // 用户密码
        authCode: '' // 验证码
      },
      agreement: 0, // 用户协议
      type: 0, // 登录类型
      code: [], // 验证码暂存数组
      listitem: indexList.list,
      show: false, // 展示下拉
      phonetittle: '+86'
    }
  },
  methods: {
    // 跳转至手机验证码登录
    changeauth1 () {
      this.type = 1
    },
    // 跳转至用户名密码登录
    changpass () {
      this.type = 0
    },
    // 跳转至手机验证码输入
    changeauth2 () {
      this.type = 2
    },
    // 验证码转换
    changeauth3 () {
      this.user.authCode = this.code.join('') // 数组转换为字符串
    },
    // 国际区域选择弹出显示
    pull () {
      this.show = this.show === false
      console.log(this.show)
    },
    // 验证码输入焦点跳转
    focusNext (nextRef) {
      this.$refs[nextRef].focus()
    },
    // 获取当前国际区域电话前缀，关闭窗口
    phone (item) {
      console.log(this.listitem)
      this.phonetittle = item.code
      this.show = false
    }
  },
  watch: {
    code () {
      // 监听code的值是否有变化
      this.$nextTick(() => {
        // 当code值改变时焦点跳转
        this.$refs.mobile3.focus() // 焦点自动跳转至下一个组件终点组件为mobile3
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-controller {
  background-image: url(../../assets/imgs/Cache_-473011ec93977221..jpg);
  background-size: 100% 100%;
  height: 100vh;
}
/deep/.van-field__control {
  color: #fff;
}
/deep/ .van-cell--borderless::after,
.van-cell:last-child::after {
  display: inline-block;
}
/deep/ [class*='van-hairline']::after {
  border: none;
}
/deep/ .van-cell-group,
/deep/ .van-dropdown-menu__bar {
  background: transparent !important;
}
/deep/ .van-dropdown-menu__title::after {
  width: 10px;
  height: 10px;
}
/deep/ .van-cell {
  background: transparent !important;
}
/deep/ .van-cell::after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/deep/ .van-popup{
  max-height: 70%;
}
/deep/ .van-index-bar__sidebar{
  top: 65%;
}
.login-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  img {
    height: 50px;
    width: 244px;
  }
}
.login-title {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #ffffff;
  margin-left: 41px;
  img {
    margin-right: 10px;
    width: 10px;
    height: 14px;
  }
}
.login-input {
  width: 293px;
  margin: 0 auto;
  .addon-input {
    display: flex;
    align-items: center;
    justify-content: center;
    /deep/ .van-cell,
    .van-cell--borderless,
    .van-field::after {
      border: 0px !important;
    }
    .addon-text {
      display: flex;
      span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        width: 50px;
      }
      .down-icon {
        display: flex;
        align-self: center;
      }
    }
  }
  .auth-input {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 228px;
    .auth-pass {
      input {
        text-align: center;
        width: 40px;
        height: 21px;
        background: #ffffff;
        border-radius: 6px;
      }
    }
  }
}
.login-auth {
  display: flex;
  font-size: 11px;
  color: #63b1ff;
  margin-left: 50px;
  margin-top: 13px;
  .leif-tip{
    width: 180px;
  }
  .tip{
    width: 78px;
    height: 13px;
    text-align: right;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
}
.login-button {
  margin: 0 auto;
  margin-top: 30px;
  width: 293px;
  height: 40px;
  color: #4056da;
}
.login-agreement {
  margin: auto;
  width: 70%;
  margin-top: 11.5px;
  font-size: 11.5px;
  /deep/ .van-checkbox__label {
    color: #ffffff;
  }
  span {
    color: #63b1ff;
  }
}
.quick-login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 50%;
  margin-top: 50px;
  span {
    color: #ffffff;
    font-size: 11.5px;
    text-align: center;
  }
  .quick-line {
    margin-right: 6.5px;
    margin-left: 6.5px;
    width: 40px;
    height: 1px;
    background: #ffffff;
  }
}
.quick-logo {
  margin: auto;
  width: 102.5px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo {
    margin-left: 9.25px;
    margin-right: 9.25px;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
</style>
